<style>
    #topic-update {
        padding: 20px 25px 25px 0;
    }

    .layui-form-label {
        width: 140px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="topic-update">
    <form class="layui-form" action="" lay-filter="topic-update-form">
        <div class="layui-form-item website-hide">
            <label class="layui-form-label website-form-item-require">topicId：</label>
            <div class="layui-input-block">
                <input type="text" name="topicId" data-th-value="${topic.topicId}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label website-form-item-require">课题名称：</label>
                    <div class="layui-input-block">
                        <textarea type="text" name="topicName" rows="5" lay-verify="required"
                                  autocomplete="off" class="layui-textarea"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">学科：</label>
                    <div class="layui-input-block">
                        <select name="subjectTypeCodes"
                                xm-select-direction="down"
                                xm-select="subjectTypeCodes"
                                xm-select-skin="default">
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label website-form-item-require">课题类型：</label>
                    <div class="layui-input-block">
                        <select name="topicClassifyCode" lay-filter="topicClassifyCode" lay-verify="required">
                            <option value="">请选择</option>
                            <option th:each="item : ${topicClassifyCode}"
                                    th:selected="${ topic.topicClassifyCode eq item.code}"
                                    th:value="${item.code}" th:text="${item.name}">
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label">课题分类：</label>
                    <input type="hidden" name="topicLevelType" id="topicLevelTypeVal"/>
                    <div id="entrustType">
                        <div class="layui-col-md4">
                            <select lay-filter="entrustType">
                                <option value="">请选择</option>
                                <option
                                        th:each="item : ${annualType}"
                                        th:selected="${ topic.topicLevelType eq item.code}"
                                        th:value="${item.code}" th:text="${item.name}">
                                </option>
                            </select>
                        </div>
                    </div>
                    <div id="annualType">
                        <div class="layui-col-md3">
                            <select id="typeId" lay-filter="typeId">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="layui-col-md3" style="margin-left: 5px;">
                            <select id="levelTypeCode" lay-filter="annualType">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="topic-update-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['website', 'form', 'validate', 'dict', 'formSelects'], function () {
        var $ = layui.$,
            website = layui.website,
            layer = layui.layer,
            form = layui.form,
            formSelects = layui.formSelects,
            topic = [[${topic}]],
            groups = [[${groups}]],
            validate = layui.validate;
        form.verify(validate);
        form.render();

        initSelect();
        initFormValue();

        function initFormValue() {
            form.val("topic-update-form", {
                "topicId": topic.topicId,
                "topicName": topic.topicName,
                "topicClassifyCode": topic.topicClassifyCode,
                "topicLevelType": topic.topicLevelType
            });
        }

        /**
         * 初始化下拉框
         */
        function initSelect() {
            $("#entrustType").addClass("website-hide");
            $("#annualType").addClass("website-hide");
            if (topic.topicClassifyCode === "entrust") {
                $("#entrustType").removeClass("website-hide");
            } else if (topic.topicClassifyCode === "annual") {
                $("#annualType").removeClass("website-hide");
            }
            $.each(groups, function (k, v) {
                var selected = false;
                if (topic.parentTopicLevelType === v.type.code) {
                    selected = true;
                }
                $('#typeId').append(new Option(v.type.name, v.type.code, false, selected));
            });

            if (topic.topicClassifyCode === "annual" && topic.topicLevelType) {
                setLevelTypeCodeOption(topic.parentTopicLevelType, topic.topicLevelType);
            }
            layui.form.render("select");
            //年度课题与委托课题显示的不一样哦。
            form.on('select(topicClassifyCode)', function (data) {
                var tmp = data.value;
                //年度
                if (tmp === 'annual') {
                    $("#annualType").removeClass("website-hide");
                    $("#entrustType").addClass("website-hide");
                } else if (tmp === 'entrust') {
                    $("#entrustType").removeClass("website-hide");
                    $("#annualType").addClass("website-hide");
                }else{
                    $("#entrustType").removeClass("website-hide");
                    $("#annualType").removeClass("website-hide");
                }
            })
            form.on('select(typeId)', function (data) {
                setLevelTypeCodeOption(data.value, null);
            })
            form.on('select(entrustType)', function (data) {
                $("#topicLevelTypeVal").val(data.value);
            })

            form.on('select(annualType)', function (data) {
                $("#topicLevelTypeVal").val(data.value);
            })
        }

        /**
         * 写入年度的二级下拉框
         * @param data
         */
        function setLevelTypeCodeOption(data, levelTypeCode) {
            var tmp = data;
            $("#levelTypeCode").empty();
            $.each(groups, function (k, v) {
                if (v.type.code == tmp) {
                    if (v.course.length != 0) {
                        $('#levelTypeCode').append(new Option("请选择", ""));
                        $.each(v.course, function (key, value) {
                            let selected = false;
                            if (levelTypeCode && value.code === levelTypeCode) {
                                selected = true;
                            }
                            $('#levelTypeCode').append(new Option(value.name, value.code, false, selected));
                        });
                    } else {
                        $('#levelTypeCode').append(new Option('无内容', ''));
                    }
                }
            });
            $("#topicLevelTypeVal").val("");
            layui.form.render("select");
        }

        formSelects.render();
        formSelects.config('subjectTypeCodes', {
            searchUrl: ctx + 'dict/parent/subject_type',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].name,
                        value: data[i].code
                    })
                }
                result.data = tranData;
                return result;
            },
            success: function () {
                formSelects.value('subjectTypeCodes', topic.subjectTypeCodes);
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                website.alert.error('获取学科字典列表失败');
            }
        });

        form.on('submit(topic-update-form-submit)', function (data) {
            website.post(ctx + 'biz/topic/update', data.field, function () {
                layer.closeAll();
                website.alert.success('修改课题成功');
                $('#website-topic').find('#query').click();
            });
            return false;
        });
    });
</script>